body {
  margin: 0;
}

.resource-label {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  letter-spacing: 1px;
  font-size: 0.92rem;
  text-transform: uppercase;
}

.resource-label-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  border-radius: 100%;
  margin-right: 6px;
  font-size: 1.1rem;
}

.ListItem-inner {
  padding: 10px;
  border-left: 1px solid #c8cdd1;
  border-right: 1px solid #c8cdd1;
}

.MenuItem {
  color: #3b4a57;
  text-decoration: none;
  padding: 6px 8px;
  padding-left: 16px;
  display: block;
  border-left: 3px solid transparent;
}

.MenuItem:hover:not(.active) {
  text-decoration: underline;
}

.MenuItem.active,
.MenuItem:active {
  color: rgb(37, 120, 203);
  border-left: 3px solid rgb(37, 120, 203);
}

ul.ModuleList,
ul.unstyled-list,
ul.ExpandCollapseList {
  list-style: none;
  padding: 0;
  margin: 0;
}

ol.assessment-questions {
  padding: 0 40px;
}

.unstyled-list li {
  padding: 0;
  margin: 0;
}

h3 {
  margin: 0;
  font-size: 1.125rem;
  font-family: "LatoWeb", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.ExpandCollapseList {
  border: 1px solid #e9ebed;
  border-radius: 4px;
}

.Module {
  list-style: none;
  margin-bottom: 24px;
}

.ExpandCollapseList-item:first-of-type {
  border-top: none;
}

.ExpandCollapseList-item-inner {
  display: flex;
}

.ExpandCollapseList .ExpandCollapseList .ExpandCollapseList-item:first-of-type {
  border-top: 1px solid #e9ebed;
}

.ExpandCollapseList-item {
  border-top: 1px solid #e9ebed;
  padding: 12px;
}

.ExpandCollapseList .ExpandCollapseList {
  border: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.ExpandCollapseList-item-pts {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.ExpandCollapseList-item-workflow-state {
  margin-left: 8px;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.ExpandCollapseList-item-details {
  color: #4e575f;
  font-size: 0.82rem;
  margin-top: 4px;
}

.resource-icon {
  margin-right: 12px;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.RichContent img {
  max-width: 100%;
}

.assessment-questions .RichContent p {
  margin: 0 0 10px 0 !important;
}

.course-title {
  margin: 0;
  font-family: LatoWeb, Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-size: 1.8rem;
}

@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fade-in {
  -webkit-animation: fade-in 0.5s 1;
  animation: fade-in 0.5s 1;
}

.hidden {
  display: none;
}

.submission-format:not(:last-of-type)::after {
  content: ", ";
}

.preview-not-available-icon {
  width: 282px;
  margin: 80px 0;
}

.RichContent iframe {
  border: 0 none;
}

.EmbeddedPreview iframe {
  width: 100%;
  height: 800px;
  border: 0 none;
}

.EmbeddedPreview--video,
.EmbeddedPreview--audio {
  max-width: 100%;
}

.Assessment--IconCheckMark {
  min-width: 32px;
}

a:focus,
main:focus {
  outline: 2px solid #008ee2 !important;
}

a,
main {
  outline: 2px solid transparent !important;
}

table {
  width: 100%;
  border-radius: 5px;
  border-collapse: collapse;
}

table,
th,
td {
  border: 1px solid #b4b4b4;
}

th,
td {
  padding: 0.5rem 1rem;
}

@media screen and (max-width: 550px) {
  .MenuItem {
    padding-left: 6px;
  }
}

/*
  CSS Grid styles for the cartridge view
  and hamburger menu for mobile
*/

.CommonCartridge--view {
  display: grid;
  grid-column-gap: 20px;
  grid-template-columns: 200px 1fr;
}

.CommonCartridge--view.single-resource {
  grid-template-columns: 1fr;
}

.CommonCartridge--view nav {
  padding-top: 20px;
}

.Resource--navButtons {
  display: grid;
  padding: 10px 0 30px 0;
  grid-template-columns: auto auto;
  grid-template-areas: "prev next";
  justify-content: space-between;
  align-content: space-between;
}

.previous-link {
  grid-area: prev;
}

.next-link {
  grid-area: next;
}

#CommonCartridge--navToggle,
.CommonCartridge--view nav label,
#NavTrigger {
  display: none;
}

.CommonCartridge--view nav .open,
.CommonCartridge--view nav .close {
  position: absolute;
  top: 7px;
  left: 8px;
}

@media screen and (max-width: 550px) {
  .CommonCartridge--view nav {
    padding: 0;
    min-height: 50px;
  }

  .CommonCartridge--view {
    grid-template-columns: 1fr;
  }

  header ol {
    margin-left: 45px !important;
  }

  .Resource--navButtons {
    padding-top: 0;
  }

  .CommonCartridge--view nav .open {
    display: block;
  }

  #NavTrigger:checked + .open {
    display: none;
  }

  .navLinks {
    padding: 0 10px;
    max-height: 0;
    overflow: hidden;
    transition: all 0.5s ease;
    opacity: 0;
  }

  #NavTrigger:checked + .open + .navLinks + .close {
    display: block;
  }

  #NavTrigger:checked + .open + .navLinks {
    padding: 50px 10px 10px 10px;
    max-height: 100vh;
    opacity: 1;
  }
}

.CommonCartridge--content {
  overflow: auto;
}

:root {
  /** Resource type colors **/
  --color-course: #008ee2;
  --color-document: #008ee2;
  --color-module: #00ac18;
  --color-image: #00ac18;
  --color-audio: #66189d;
  --color-discussion: #66189d;
  --color-video: #fc5e13;
  --color-page: #fc5e13;
  --color-quiz: #ee0612;
  --color-assignment: #bf32a4;
  --color-external-link: #ad4aa0;
}
